iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

弄點簡單的 Chrome Extension 讓生活更方便系列 第 29

Chrome Extension 29 - Youtube 筆記功能,option 頁面增加影片標籤搜尋功能

  • 分享至 

  • xImage
  •  

繼續對 option 頁面,可以利用 tag 做簡單的影片搜尋 :

只會對 options 的 root.vue 進行修正

在 templdate 部分,增加下拉選單 :

<el-row>
    <el-select v-model="optionSelected" clearable  placeholder="請選擇">
        <el-option v-for="item in options" :key="item" :label="item" :value="item">
        </el-option>
    </el-select>
</el-row>

loadData 增加讀取下拉部分的程式碼 :

        loadData() {
            var vm = this;
            chrome.storage.sync.get("tempData", function(result) {

                if (result !== undefined) {
                    var tempData = result.tempData;

                    var jsonResult = [];
                    if (tempData !== undefined) {
                        jsonResult = tempData;
                    }
                    vm.videos = jsonResult;

                    var arr = [];
                    jsonResult.forEach(function(video){
                        arr =  [...arr, ...video.tags];
                    });
                    vm.options = arr.filter((v, i, a) => a.indexOf(v) === i);
                }
            });
        }

增加 filterdVideos 來根據條件篩選影片 :

    computed: {
		filteredVideos: function() {
			var vm = this;
			var optionSelected = vm.optionSelected;
			
			if(optionSelected.length==0) {
				return vm.videos;
			} else {
				return vm.videos.filter(function(video) {
					return video.tags.some(x=> x==optionSelected);
				});
			}
		}
	}

頁面上的 v-for videos 部分改使用 filteredVideos :

<el-row v-for="(video,index) in filteredVideos">

修正刪除影片功能,改搜尋 index 後移除影片 :

        deleteVideo(filteredIndex) {
            var vm = this;
            var video = vm.filteredVideos[filteredIndex];

            var index = vm.getVideoIndex(video.videoKey);

            if(index>=0){
                vm.videos.splice(index, 1);
                vm.saveData();
            }
        },
        getVideoIndex(videoKey){
            var vm = this;

            var tempIndex = -1;

            vm.videos.forEach(function(video,index){
                if(video.videoKey== videoKey){
                    tempIndex = index;
                }
            });
            return tempIndex;
        }

執行結果 :
https://ithelp.ithome.com.tw/upload/images/20181113/200942232CNI55D19b.png

收工,感謝收看 :) ~~~


上一篇
Chrome Extension 28 - Youtube 筆記功能,增加影片標籤
下一篇
Chrome Extension 30 - 發行與心得
系列文
弄點簡單的 Chrome Extension 讓生活更方便30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言